<template>
  <div>
    <Nav message="2" />
    <div style="border-top: 0.5rem rgb(141, 206, 218) solid"></div>

    <span v-for="(item, index) in ordersDetail" :key="index">
      <div class="orderItem">
        
        <div class="payStatus">
          <div style="float: right">
            {{ item.orderInfo.payStatus == 0 ? "待付款" : "已完成" }}
          </div>

          <br />
          <div style="float: right">订单号：{{ item.orderInfo.orderId }}</div>
          <br />
          <div style="float: right">交易时间：{{ item.orderInfo.createTime }}</div>
          <br />

          <span class="shopAddress">
            <div style="float: right">收货人：{{ item.buyerAddress.name }}</div>
            <br />
            <div style="float: right">
              联系方式：{{ item.buyerAddress.tel }}
            </div>
            <br />
            <div style="float: right">
              收货地址：{{ item.buyerAddress.address }}
            </div>
          </span>
        </div>










<span v-for="(lineSku,index) in item.skuList" :key="index">

  <div class="solid" ></div>
        <van-card
          :num="lineSku.num"
          :price="lineSku.price"
          :title="lineSku.spuName"
          :thumb="lineSku.icon"
        >
          <template #title>
            <div class="van-multi-ellipsis--l3" style="font-size: 0.8rem">
              {{ lineSku.spuName }}
            </div>
          </template>
          <template #tags>
            <van-tag
              v-for="(tag, index) in lineSku.skuTag"
              :key="index"
              style="margin-right: 0.3rem"
              >{{ tag }}</van-tag
            >
          </template>
        </van-card>

        <van-cell>
          <van-col style="float: right">配送：快递￥{{ lineSku.freight }}</van-col>
        </van-cell>

        <van-cell style="font-weight: bold" v-if="item.skuList[1] != null">
          <van-col style="color: rosybrown; float: right"
            >
            
            小计：￥{{
              (lineSku.amount = parseFloat(
                lineSku.num * lineSku.price + lineSku.freight
              ).toFixed(2))
            }}
          </van-col>
        </van-cell>


</span>


        <van-cell style="font-weight: bold">
          <van-col style="float: right" class="orderAmount"
            >订单总价：￥
            {{item.orderInfo.orderAmount.toFixed(2)}}
            <!-- {{
              (lineSku.amount = parseFloat(
                lineSku.num * lineSku.price + lineSku.freight
              ).toFixed(2))
            }} -->
          </van-col>
        </van-cell>





      </div>
    </span>
  </div>
</template>
<script>
import Nav from "@/components/Nav.vue";
export default {
  components: {
    Nav,
  },
  created() {
    let token = this.$cookie.get("shoptoken");
    if (token == null) {
      this.$router.push({
        path: "/login",
        query: { item: this.$route.path },
      });
    }
    const _this = this;
    axios.get(this.$api + "order/list", {
      params: {
        token: token,
      },
    })
    .then(function (resp) {
      console.log(resp)
      _this.ordersDetail = resp.data.data
    });
  },
  data() {
    return {
      ordersDetail: [
        // {
        //   skuList: [
        //     {
        //       spuName:
        //         "Apple Mac Pro Desktop Computer, 3.5GHz 8-Core Intel Xeon W, 32GB Memory, 256GB SSD, Radeon Pro 580X 8GB, Magic Mouse 2, Stainless Steel with Feet",

        //       freight: 10, //运费
        //       num: 2,
        //       price: "30000.33",
        //       icon: "../static/imac-white-1.png",
        //       amount: 30011.333, //总价
        //       skuTag: ["灰色", "32G"],
        //     },
        //                 {
        //       spuName:
        //         "Apple Mac Pro Desktop Computer, 3.5GHz 8-Core Intel Xeon W, 32GB Memory, 256GB SSD, Radeon Pro 580X 8GB, Magic Mouse 2, Stainless Steel with Feet",

        //       freight: 10, //运费
        //       num: 2,
        //       price: "30000.00",
        //       icon: "../static/imac-white-1.png",
        //       amount: 30011.333, //总价
        //       skuTag: ["灰色", "32G"],
        //     },
        //   ],
        //   orderInfo: {
        //     createTime: "2020-11-14 22:57:51",
        //     orderId: "16053665946650243",
        //     payStatus: 1, //支付状态
        //   },
        //   buyerAddress: {
        //     name: "Sherry",
        //     tel: "13399990000",
        //     address: "美国华盛顿哥伦比亚特区西北宾夕法尼亚大道1600号",
        //   },
        // },
        // {
        //   orderId: "1586242977480760991",
        //   spuName:
        //     "Apple Mac Pro Desktop Computer, 3.5GHz 8-Core Intel Xeon W, 32GB Memory, 256GB SSD, Radeon Pro 580X 8GB, Magic Mouse 2, Stainless Steel with Feet",
        //   payStatus: 1, //支付状态
        //   freight: 20, //运费
        //   num: 2,
        //   price: "50000.55",
        //   icon: "../static/imac-white-1.png",
        //   amount: 50010.55, //总价
        //   skusInfo: [
        //     {
        //       skuName: "颜色",
        //       skuValue: "灰色",
        //     },
        //     {
        //       skuName: "内存",
        //       skuValue: "32G",
        //     },
        //   ],
        // },
      ],
    };
  },
  methods: {},
};
</script>
<style scope>
.payStatus {
  /* margin-left: 80%; */
  font-size: 0.85rem;
  font-weight: bold;
  color: rgb(223, 134, 178);
  /* height: auto; */
  line-height: 1.3rem;
  padding: 0.5rem;
  /* display: block; */
  text-align: right;
  /* background: gold; */
  overflow:hidden;
}
.orderItem {
  border: 0.5rem rgb(141, 206, 218) solid;
  border-top: none;
}
.van-card__num {
  font-size: 1rem;
  font-weight: 900;
}
.shopAddress {
  color: rgb(105, 147, 236);
}
.orderAmount{
  color:rgb(241, 98, 62)
}
.solid{
  border-top: 0.2rem rgb(214, 243, 225) solid;
  margin:0 1rem;
}
</style>